Snykでコード品質をチェックする

#Snyk

おーしろ

2022.08.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、新規事業統括部 Profllyチームのおーしろです。

Snykには現在 Snyk Open Source Snyk Code Snyk Container Snyk IaC Snyk Cloudなどのプロダクトがあり主にセキュリティに関する診断をすることが出来ますが、IDEでSnykのプラグイン(Snyk Code Checker)を利用するとコードの品質をチェックすることが出来ます。

Snyk Code Checkerとは

IDEのプラグインとして利用でき、アプリケーションコードをスキャンし品質とセキュリティの問題点検出するためのツールです。開発者はコーディング中に直接その場でコードを修正することで品質とセキュリティの高いコーディングができるというサービスです。

開発者はコーディング中に直接その場でコードを修正できるという点はSnyk Code Checkerの特徴の1つです。

プラグインのインストール

※事前にSnykのアカウント作成と、利用中のOSや環境に合わせてSnyk CLIをインストールして置く必要があります。 (Snyk CLI インストール公式手順)

今回はVSCodeへのインストールを行いますが、IntelliJなど様々なIDEに対応しているようです。

Snyk Web UI の Integration > IDE plugins から利用しているIDEを選択(本記事ではVisual Studio Codeを選択)。

別ウィンドウが開くのでInstallをクリック。

先ほど選択したIDEのプラグインインストール画面が表示されるのでインストールをクリック。

Snykへのログインが必要なためConnect VS Code with Snykをクリック。

ブラウザで認証画面が表示されるためAuthenticateをクリック。

認証に成功するとSnykのプラグインで自動的にスキャンが実行されます。

コード品質について提案されている箇所の確認方法

デフォルト設定ではコーディング中にファイルを保存すると自動的にスキャンが実行され、画像のように波線と電球アイコンでコード品質についての提案が表示されます。電球アイコンからshow this suggestion(Snyk)をクリックすると新しいタブで修正方法などの詳細情報が表示されます。

また、Snykのプラグインメニューから提案の箇所を特定することも出来ます。このときコード品質に関しての提案はCODE QUALITYのタブで確認します。

修正する

提案には下記のように記載せれています。

Using isNaN [:86] may lead to unexpected results. Consider the more robust Number.isNaN instead.

[日本語訳]
isNaNを使用すると、予期しない結果になることがあります。
代わりにより堅牢なNumber.isNaNを検討してください。

また、[More info]をクリックすると提案内容のより詳細な内容が記載せれたサイトに遷移し、isNaNを利用したときの実例などが記載されています。

提案内容にはコードの例も記載されているのでそれを参考に修正し、保存をするとスキャンが再度実行されます。スキャン後は提案が消えることが確認できました。

留意点

IDEにSnykのプラグインをインストールするとIDEで開いているディレクトリに.dccacheといファイルが自動的に作成されます。これはSnykのプラグインがスキャン時にのパフォーマンスを向上させる(スキャンスピードを上げる)ためのファイルで、推奨の対応としては削除せずに.gitignoreにてGit管理の対象外にするなどの対応が必要とのことです。ちなみに削除してもVSCodeでディレクトリを再読込すると自動的に作成されます。